<template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        v-dialogDrag
        append-to-body
        @close="handleClose"
    >
        <el-form
            ref="formRef"
            :model="formData"
            v-loading="formLoading"
            label-width="100px"
        >
            <el-form-item
                label="号码类型"
                prop="numberType"
                :rules="[
                    {
                        required: true,
                        message: '请选择号码类型',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-select
                    v-model="formData.numberType"
                    style="width: 100%"
                    filterable
                    placeholder="请选择号码类型"
                >
                    <el-option
                        v-for="(item, index) in numberTypeList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="链接"
                prop="linkId"
                :rules="[
                    { required: true, message: '请选择链接', trigger: 'blur' },
                ]"
            >
                <el-select
                    v-model="formData.linkId"
                    style="width: 100%"
                    filterable
                    placeholder="请选择链接"
                >
                    <el-option
                        v-for="(item, index) in linksList"
                        :key="index"
                        :label="`${item.linkUrl}${item.linkDescription ? `（${item.linkDescription}）` : ''}`"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="工单"
                prop="workId"
                :rules="[
                    {
                        required: true,
                        message: '请输入工单',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-select
                    v-model="formData.workId"
                    style="width: 100%"
                    filterable
                    placeholder="请选择工单"
                >
                    <el-option
                        v-for="(item, index) in workList"
                        :key="index"
                        :label="item.workName"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="号码"
                prop="accountNumber"
                :rules="[
                    { required: true, message: '请输入号码', trigger: 'blur' },
                ]"
            >
                <el-input
                    v-model="formData.accountNumber"
                    type="textarea"
                    :rows="2"
                    placeholder="一行一个号码"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio v-model="formData.status" :label="1">正常</el-radio>
                <el-radio v-model="formData.status" :label="0">停用</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm"
                :disabled="formLoading"
                >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getLinksList } from "@/api/links";
import { getWorkOrderList } from "@/api/worksheet";
import { addNo, editNo } from "@/api/No";
export default {
    data() {
        return {
            // 弹出层标题
            dialogTitle: "",
            // 是否显示弹出层,
            dialogVisible: false,
            formLoading: false,
            formData: {
                linkId: "",
                numberType: "",
                workId: "",
                accountNumber: "",
                status: 1,
            },
            numberTypeList: [
                // 1：WhatsApp，2：Telegram，3：Line，4：自定义
                {
                    label: "WhatsApp",
                    value: 1,
                },
                {
                    label: "Telegram",
                    value: 2,
                },
                {
                    label: "Line",
                    value: 3,
                },
                {
                    label: "自定义",
                    value: 4,
                },
            ],
            linksList: [],
            workList: [],
        };
    },
    methods: {
        /** 打开弹窗 */
        async open(row) {
            this.dialogVisible = true;
            // 修改时，设置数据
            if (row.id) {
                this.dialogTitle = "修改号码";
                this.formData = { ...this.formData, ...row };
            } else {
                this.dialogTitle = "新增号码";
            }
        },
        /** 提交按钮 */
        async submitForm() {
            // 校验主表
            await this.$refs["formRef"].validate();
            this.formLoading = true;
            try {
                const data = this.formData;
                data.accountNumber = data.accountNumber.replace(/\n/g, ",");
                // 修改的提交
                if (data.id) {
                    await editNo(data);
                    this.$modal.msgSuccess("修改成功");
                    this.dialogVisible = false;
                    this.$emit("success");
                    return;
                }
                // 添加的提交
                await addNo(data);
                this.$modal.msgSuccess("新增成功");
                this.dialogVisible = false;
                this.$emit("success");
            } finally {
                this.formLoading = false;
            }
        },

        async getLinks() {
            const { code, data } = await getLinksList({
                pageNo: 1,
                pageSize: 3000,
            });
            if (code === 0) {
                this.linksList = data?.list || [];
            }
        },
        /** 表单重置 */
        reset() {
            this.formData = {
                linkId: "",
                numberType: "",
                workId: "",
                accountNumber: "",
                status: 1,
            };
            this.resetForm("formRef");
        },
        handleClose() {
            this.reset();
        },
        async getWorkOrderList() {
            const { code, data } = await getWorkOrderList({
                pageNo: 1,
                pageSize: 3000,
            });
            if (code === 0) {
                this.workList = data?.list || [];
            }
        },
    },
    created() {
        this.getLinks();
        this.getWorkOrderList();
    },
};
</script>
